<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>君地集团 - 爱吉多 - 四季新鲜</title>
    <% include ../../common/common-resource.ejs %>
    <script src="https://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
    <script src="/javascripts/manage/vegetable.js"></script>
</head>、
<body>
<div class="container-fluid" id='vegetable-container'>
    <div class="row">
        <div class="col-md-12">
            <ul class="breadcrumb">
                <li>
                    <a href="#">君地</a>
                </li>
                <li>
                    <a href="#">后台管理</a>
                </li>
                <li class="active">
                    爱吉多 - 【四季新鲜】配置
                </li>
            </ul>
            <ul class="nav nav-tabs">
                <li>
                    <a href="#">证书</a>
                </li>
                <li class="active">
                    <a href="#">四季新鲜</a>
                </li>
                <li>
                    <a href="#">水果</a>
                </li>
                <li>
                    <a href="#">首页</a>
                </li>
            </ul>
            <div class="page-header">
                <h1>
                    配置【四季新鲜】
                    <small>增加、修改、删除、禁用【四季新鲜】</small>
                </h1>
                <button class="btn btn-success" @click='onAddClick'>增加水果</button>
            </div>
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>#</th>
                    <th>蔬菜名-中文</th>
                    <th>蔬菜名-英文</th>
                    <th>蔬菜名-西班牙文</th>
                    <th>简介-中文</th>
                    <th>简介-英文</th>
                    <th>简介-西班牙文</th>
                    <th>食用方法-中文</th>
                    <th>食用方法-中文</th>
                    <th>食用方法-西班牙文</th>
                    <th>季节</th>
                    <th>蔬菜类型</th>
                    <th>更新时间</th>
                    <th>图片链接</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <% vegetables.forEach(function (vegetable) { %>
                <tr :class='{danger: <%= vegetable.id %> == editingItem.id}'>
                    <td><%= vegetable.id %></td>
                    <td><%= vegetable.cnName %></td>
                    <td><%= vegetable.enName %></td>
                    <td><%= vegetable.spaName %></td>
                    <td><%= vegetable.cnBrief %></td>
                    <td><%= vegetable.enBrief %></td>
                    <td><%= vegetable.spaBrief %></td>
                    <td><%= vegetable.cnMethod %></td>
                    <td><%= vegetable.enMethod %></td>
                    <td><%= vegetable.spaMethod %></td>
                    <td>
                        <%  var _seasonText = '';
                            switch (vegetable.season){
                                case 'spring':
                                  _seasonText = '春季';
                                  break;
                                case 'summer':
                                  _seasonText = '夏季';
                                    break;
                                case 'fall':
                                  _seasonText = '秋季';
                                    break;
                                case 'winter':
                                  _seasonText = '冬季';
                                  break;
                                default:
                                    _seasonText = '春季';
                                    break;
                        }%>
                        <%= _seasonText%>
                    </td>
                    <td>
                        <%
                            var _vegetableType = '';
                            switch (vegetable.type) {
                                case 'beans':
                                    _vegetableType = '豆类';
                                break;
                                case 'eggplant':
                                    _vegetableType = '茄果类';
                                break;
                                case 'fragrant':
                                    _vegetableType = '芳香植物';
                                break;
                                case 'leafy':
                                   _vegetableType = '叶菜类';
                                break;
                                case 'melon':
                                  _vegetableType = '瓜类';
                                break;
                                case 'root':
                                    _vegetableType = '根茎类';
                                break;
                                default:
                                    _vegetableType = '豆类';
                                  break;
                            }
                        %>
                        <%= _vegetableType %>
                    </td>
                    <td><%= vegetable.updateTime %></td>
                    <td><%= vegetable.imageUrl %></td>
                    <td>
                        <button class="btn btn-xs btn-primary" @click='onEditClick("<%= vegetable.id %>")'>编辑</button>
                        <button class="btn btn-xs btn-danger" @click='onDeleteClick("<%= vegetable.id %>")'>删除</button>
                    </td>
                </tr>
                <% }) %>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row" v-if='isFormShow'>
        <div class="col-md-8">
            <form role="form" autocomplete='off' @submit.prevent ref='form' method='post'
                  action='/manage/postVegetable' enctype="multipart/form-data">
                <input type="hidden" name='id' v-model='editingItem.id'>
                <div class="form-group">
                    <label for="vegetable-name-cn">
                        蔬菜名 - 中文
                    </label>
                    <input type="text" class="form-control" id="vegetable-name-cn" v-model='editingItem.cnName'
                           name='cnName'/>
                </div>
                <div class="form-group">

                    <label for="vegetable-name-en">
                        蔬菜名 - 英文
                    </label>
                    <input type="text" class="form-control" id="vegetable-name-en" v-model='editingItem.enName'
                           name='enName'/>
                </div>
                <div class="form-group">
                    <label for="vegetable-name-spa">
                        蔬菜名 - 西班牙文
                    </label>
                    <input type="text" class="form-control" id="vegetable-name-spa" v-model='editingItem.spaName'
                           name='spaName'/>
                </div>
                <div class="form-group">
                    <label for="vegetable-brief-cn">
                        简介 - 中文
                    </label>
                    <textarea type="text" class="form-control" id="vegetable-brief-cn" v-model='editingItem.cnBrief'
                              name='cnBrief'></textarea>
                </div>
                <div class="form-group">

                    <label for="vegetable-brief-en">
                        简介 - 英文
                    </label>
                    <textarea type="text" class="form-control" id="vegetable-brief-en" v-model='editingItem.enBrief'
                              name='enBrief'></textarea>
                </div>
                <div class="form-group">
                    <label for="vegetable-brief-spa">
                        简介 - 西班牙文
                    </label>
                    <textarea type="text" class="form-control" id="vegetable-brief-spa" v-model='editingItem.spaBrief'
                              name='spaBrief'></textarea>
                </div>
                <div class="form-group">
                    <label for="vegetable-eat-cn">
                        食用方法 - 中文
                    </label>
                    <textarea type="text" class="form-control" id="vegetable-eat-cn" v-model='editingItem.cnMethod'
                              name='cnMethod'></textarea>
                </div>
                <div class="form-group">

                    <label for="vegetable-eat-en">
                        食用方法 - 英文
                    </label>
                    <textarea type="text" class="form-control" id="vegetable-eat-en" v-model='editingItem.enMethod'
                              name='enMethod'></textarea>
                </div>
                <div class="form-group">
                    <label for="vegetable-eat-spa">
                        食用方法 - 西班牙文
                    </label>
                    <textarea type="text" class="form-control" id="vegetable-eat-spa" v-model='editingItem.spaMethod'
                              name='spaMethod'></textarea>
                </div>
                <div class="form-group">
                    <label for="vegetable-season">
                        季节
                    </label>
                    <div><input type="radio" v-model='editingItem.season' name='season' value='spring'><span>春季</span></div>
                    <div><input type="radio" v-model='editingItem.season' name='season' value='summer'><span>夏季</span></div>
                    <div><input type="radio" v-model='editingItem.season' name='season' value='fall'><span>秋季</span></div>
                    <div><input type="radio" v-model='editingItem.season' name='season' value='winter'><span>冬季</span></div>
                </div>
                <div class="form-group">
                    <label for="vegetable-type">
                        蔬菜类型
                    </label>
                    <div><input type="radio" name='type' v-model='editingItem.type' value='beans'><span>豆类</span></div>
                    <div><input type="radio" name='type' v-model='editingItem.type' value='eggplant'><span>茄果类</span></div>
                    <div><input type="radio" name='type' v-model='editingItem.type' value='root'><span>根茎类</span></div>
                    <div><input type="radio" name='type' v-model='editingItem.type' value='melon'><span>瓜类</span></div>
                    <div><input type="radio" name='type' v-model='editingItem.type' value='leafy'><span>叶菜类</span></div>
                    <div><input type="radio" name='type' v-model='editingItem.type' value='fragrant'><span>芳香植物</span></div>
                </div>

                <div class="form-group">
                    <label for="vegetable-image">
                        上传证书
                    </label>
                    <input type="file" id="vegetable-image" name='vegetablePicture'/>
                    <p class="help-block">
                        图片最好是【220*320】要不然， 在页面上显示会惨不忍睹
                    </p>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" v-model='editingItem.status' name='status' :value='editingItem.status'/> 是否可用
                    </label>
                </div>
                <button class="btn btn-success" @click='onSubmitClick' :disabled='isSubmitEnabled'>
                    提交
                </button>
            </form>
        </div>
        <div class="col-md-4">
            <img alt="Bootstrap Image Preview" :src="editingItem.imageUrl"/>
            <dl>
                <dt>
                    Description lists
                </dt>
                <dd>
                    A description list is perfect for defining terms.
                </dd>
                <dt>
                    Euismod
                </dt>
                <dd>
                    Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
                </dd>
                <dd>
                    Donec id elit non mi porta gravida at eget metus.
                </dd>
                <dt>
                    Malesuada porta
                </dt>
                <dd>
                    Etiam porta sem malesuada magna mollis euismod.
                </dd>
                <dt>
                    Felis euismod semper eget lacinia
                </dt>
                <dd>
                    Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo
                    sit amet risus.
                </dd>
            </dl>
        </div>
    </div>
</div>
</body>
</html>
